import React, { memo, useState, useEffect } from 'react'

//第三方
import moment from 'moment';
//网络请求
import { getArticleDetailRequest } from '../../services/Admin';
//AntDesign
import { message,Avatar,Divider,PageHeader } from 'antd';
import { SmileTwoTone, MehTwoTone } from '@ant-design/icons';
//自定义样式
import {
    AuthorShowWrapper,
    ContenShowWrapper

}  from './style';
import { NavLink } from 'react-router-dom';

export default memo(function ArticleDetail(props) {
    //获取文章aid参数
    // console.log(props);
    var aid = props.match.params.aid;
    const newAid = aid.substr(1,aid.length);
    //获取文章为aid的文章的信息
    const [articleDetails, setArticleDetails] = useState({});
    const [author,setAuthor] = useState({});
    const [isgetInfo, setIsGetInfo] = useState(false);

    //获取文章相关信息的函数
    const getArticleDetail = () => {
        getArticleDetailRequest(newAid).then(res => {
            // console.log(res);
            
            if(res.code===200)
            {
                // console.log(res.data);
                setArticleDetails(res.data);
                setAuthor(res.data.article_author_id);
                setIsGetInfo(true);
                // message.success("获取文章详情成功！");
            }
            else
            {
                message.error("获取文章详情信息失败！");
           }
        })
    }

    useEffect(() => {
        if(isgetInfo===false)
        {
            getArticleDetail();
        }
    }, [isgetInfo]);

    
    return (
        <div>
            <PageHeader
                className="site-page-header"
                onBack={() => window.history.back()}
                title="文章详情"
                // subTitle="This is a subtitle"
            />
            <AuthorShowWrapper >
                <div className="avatar">
                    <Avatar size={64} shape="square" src={author.avatar} />
                </div>
                <div className="author_info">
                    <div className="author_name">{author.username}   {author.role==="001" ? <SmileTwoTone /> : <MehTwoTone />}</div>
                    <div className="author_personality">{author.personality}</div>
                    <div className="author_description">{author.description}</div>
                </div>
            </AuthorShowWrapper>
            <ContenShowWrapper>
            <div className='header'>
                <div className="title">{articleDetails.article_title}</div>
                {/* <div className="theme">{theme.a_theme_id}</div> */}
                <div className="pubtime">{moment(articleDetails.article_pubtime).fromNow()}</div>
            </div>
            <div className='content'>
                <div>
                    <img src={articleDetails.article_cover} alt={articleDetails.article_title} />
                </div>
                <text>
                    {articleDetails.article_content}
                </text>

            </div>
        </ContenShowWrapper>
        </div>
    )
})
